<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { vDraggable } from 'vue-draggable-plus'
import { objextend } from '@/js/function.js'
import { config_default } from './config.js'
// import articlelist from '@/views/article/article-list.index.vue'

const props = defineProps({
    config: Object,
    active: String,
});
//需要响应式时使用toRefs
const { config } = toRefs(props);


const mergedObj = objextend(config_default(), config.value)
objextend(config.value, mergedObj)


function onArticle(item) {
    var obj = {
        id: item.id,
        name: item.title,
        url: item.coverImage,
    }
    config.value.list.push(obj)
}
const dialog = ref(false)

</script>

<template>


    <el-form :model="config" label-width="80px">
        <h1>修改：<input type="text" v-model="config.title" style="border-width: 0 0 1px 0;"></h1>
        <!-- <el-form-item label="标题名">
            <el-input type="text" v-model="config.name" />
        </el-form-item> -->
        <el-form-item label="文章">
            <div class="flexrow justify-evenly" v-draggable="[config.list, { animation: 150 }]" style="width: 100%;">
                <div class="article dragmove" v-for="(item, index) in config.list" :key="item.key">
                    <div class="delete handle" @click="config.list.splice(index, 1)">删除</div>
                    <h3>{{ item.name }}</h3>
                </div>
            </div>
            <el-button type="primary" plain @click="dialog = true">新增文章</el-button>
        </el-form-item>
        <el-form-item label="备注">
            <el-input type="text" v-model="config.note" />
        </el-form-item>
    </el-form>

    <el-dialog v-model="dialog" title="选择文章" top="2vh">
        <div style="height: 88vh;overflow: auto;">
            <!-- <articlelist :xuanze="true" @tohost="onArticle" /> -->
        </div>
    </el-dialog>


</template>

<style scoped>
.article{width: 100%;font-size: 14px;line-height: 2.3;border-bottom: #eee 1px solid;}
.article h3{
    margin: 0;padding: 0;font-size: 14px;
}
.article .delete{
    float: right;
}
</style>